<template>
  <div :class="['ebdmn-label-comp-container', ...removeMargin, {
    'is-required': required,
    'no-margin': noMargin
  }]"
  >
    <span v-show="!!label" class="ebdmn-label" :style="{backgroundColor: labelBackgroundColor}">{{ label }}</span>
    <slot />
  </div>
</template>

<script>
const PANEL_BG_COLOR = '#F5F7FA'
export default {
  name: 'EbdmnLabel',
  componentName: 'EbdmnLabel',
  props: {
    required: {
      type: Boolean,
      default: false
    },
    label: String,
    labelBackgroundColor: {
      type: String,
      default: PANEL_BG_COLOR
    },
    removeMargin: {
      type: Array,
      default: () => []
    },
    noMargin: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
  .ebdmn-label-comp-container {
    position: relative;
    margin: 10px;

    .ebdmn-label {
      display: inline-block;
      position: absolute;
      top: -4px;
      left: 12px;
      padding: 0 3px;
      z-index: 1001;
      height: 10px;
      font-size: 10px;
      line-height: 10px;
      color: #909399;
    }

    &.no-margin {
      margin: 0;
    }

    &.left {
      margin-left: 0;
    }

    &.top {
      margin-top: 0;
    }

    &.right {
      margin-right: 0;
    }

    &.bottom {
      margin-bottom: 0;
    }

    &.is-required {
      .ebdmn-label:after {
        display: inline-block;
        height: 100%;
        line-height: 100%;
        content: '*';
        color: #f56c6c;
        vertical-align: middle;
        margin-left: 3px;
      }
    }
  }
</style>
